<template>
  <div class="wrapper">
    <input type="text" :value="value" class="inputBody" :disabled="disabled"
      :readonly="readonly"
      @change="$emit('change', $event.target.value)"
      @input="$emit('input', $event.target.value)"
      @focus="$emit('focus', $event.target.value)"
      @blur="$emit('blur', $event.target.value)"
      >
    <template v-if="error">
      <div class="error">
        <icon icon="error" class="icon-error"></icon>
        <div>{{ errorMsg }}</div>
      </div>
    </template>
  </div>
</template>
<script>
import icon from './icon'

export default {
  components: { icon },
  name: 'zInput',
  props: {
    value: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    error: {
      type: Boolean,
      default: false
    },
    errorMsg: {
      type: String,
      default: 'error'
    }
  }
}
</script>
<style lang="scss" scoped>
  @import "var";
  .wrapper {
    color: $input-color;
    display: inline-flex;
    > .inputBody {
      border: 1px solid $border-color;
      border-radius: 4px;
      height: 32px;
      padding: 0 8px;
      &:hover {
        border: 1px solid $border-color-hover;
      }
      &:focus {
        box-shadow: inset 0 1px 3px $box-shadow-color;
        outline: none;
      }
      &[readOnly], &[disabled] {
        cursor: not-allowed;
        border-color: $border-color-readonly;
        color: $border-color-readonly;
      }
    }
    > .error {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      margin-left: 5px;
      font-size: 12px;
      color: $error;
      > .icon-error {
        display: inline-block;
        margin-right: 5px;
      }
    }
  }
</style>
